@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@

@{
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文章管理后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <ul class="layui-nav layui-bg-cyan" lay-bar="disabled">
        <li class="layui-nav-item" lay-unselect>
            <span style="margin-left: 24px; font-weight: 600; margin-right: 24px;">文章管理后台</span>
        </li>
        <!-- <li class="layui-nav-item" lay-unselect><a href="">回到主页</a></li> -->

        <li class="layui-nav-item layui-layout-right" lay-unselect>
            <a href="Index.html" style="margin-right: 24px;">
                <i class="layui-icon layui-icon-close-fill"></i> 返回主页
            </a>
        </li>
    </ul>

    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="addNewArticle">新建文章</button>
          <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="deleteSelected">删除选中项</button>
          <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
            <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
            <i class="layui-icon layui-icon-down layui-font-12"></i>
          </button>
        </div>


    </script>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
          <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
          <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
          </a>
        </div>
    </script>
    <script src="layui/layui.js"></script>
    <script>
        layui.use(['table', 'dropdown'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;


            const COLS_CONFIG = [
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true },

                { field: 'title', width: 180, expandedWidth: 260, title: '标题', fixed: 'left' },
                { field: 'summary', title: '概要', minWidth: 260, expandedWidth: 260 },
                // { field: 'article_id', width: 100, title: '文章ID', sort: true },
                { field: 'releaseTime', title: '发布时间', width: 120, sort: true },
                { field: 'sourceName', title: '来源', hide: 0, width: 150 },

                { fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo' }
            ]

            // 创建渲染实例
            table.render({
                elem: '#test',
                url: '/api/list',
                toolbar: '#toolbarDemo',

                // parseData: function (res) { // res 即为原始返回的数据
                //     return {
                //         "code": 0, // 解析接口状态
                //         "msg": 0, // 解析提示文本
                //         "count": res.length, // 解析数据长度
                //         "data": res // 解析数据列表
                //     };
                // },

                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-refresh'
                }],
                height: 'full-100',
                css: [ // 重设当前表格样式
                    '.layui-table-tool-temp{padding-right: 145px;}'
                ].join(''),
                cellMinWidth: 80,
                page: true,
                cols: [COLS_CONFIG],
                done: function () {
                    var id = this.id;

                    // 行模式
                    dropdown.render({
                        elem: '#rowMode',
                        data: [{
                            id: 'default-row',
                            title: '单行模式（默认）'
                        }, {
                            id: 'multi-row',
                            title: '多行模式'
                        }],
                        // 菜单被点击的事件
                        click: function (obj) {
                            switch (obj.id) {
                                case 'default-row':
                                    table.reload('test', {
                                        lineStyle: null // 恢复单行
                                    });
                                    layer.msg('已设为单行');
                                    break;
                                case 'multi-row':
                                    table.reload('test', {

                                        lineStyle: 'height: 95px;'
                                    });
                                    layer.msg('已设为多行显示');
                                    break;
                            }
                        }
                    });
                },
                error: function (res, msg) {
                    console.log(res, msg)
                }
            });


            function refresh() {
                table.reload('test', {
                    where: {
                    },
                    scrollPos: true,
                })
            }

            // 工具栏事件
            table.on('toolbar(test)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);

                var othis = lay(this);
                switch (obj.event) {
                    case 'addNewArticle':
                        window.open('ArticleCreate.html', '_blank');
                        break;
                    case 'deleteSelected':
                        var selectedData = checkStatus.data;
                        if (selectedData.length === 0) {
                            layer.msg('请先选中要删除的行');
                            return;
                        }
                        layer.open({
                            title: '<i class="layui-icon layui-icon-tips-fill"></i> <span class="layui-font-red">即将删除以下数据, 你确认吗?<span>',
                            content: `
                                            <table class="layui-hide" id="ID-table-willdel-data"></table>
                                            `,
                            area: ['1000px', '600px'],
                            success: function () {
                                layui.use('table', function () {
                                    var inst = table.render({
                                        elem: '#ID-table-willdel-data',
                                        cols: [COLS_CONFIG],
                                        data: selectedData,
                                        page: true, // 是否显示分页
                                        limits: [50, 100, 200],
                                        limit: 20 // 每页默认显示的数量
                                    });
                                })
                            },

                            btn: ['确认删除!', '取消'],
                            yes: function (index, layero) {
                                // 多行删除
                                var loadIndex = layer.load(2);
                                // TODO: 多项删除
                                setTimeout(function () {
                                    console.log('服务器返回结果：' + data);
                                    if (data == "登录成功") {
                                        window.location.href = "index.html"
                                    }
                                }, 3000);
                            }
                        })

                        break;
                    case 'LAYTABLE_TIPS':
                        refresh();
                        layer.msg('刷新成功');
                };
            });

            // 触发单元格工具事件
            table.on('tool(test)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据

                // 查看
                if (obj.event === 'detail') {
                    // TODO: 跳转到详情页
                    window.open("Detail_" + data.id + ".html", '_blank');

                } else if (obj.event === 'more') {
                    // 更多 - 下拉菜单
                    dropdown.render({
                        elem: this, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [{
                            title: '编辑',
                            id: 'edit'
                        }, {
                            title: '删除',
                            id: 'del'
                        }],
                        click: function (menudata) {
                            if (menudata.id === 'edit') {
                                // TODO: 跳转到编辑页
                                window.open('ArticleEdit.html?id=' + data.id, '_blank');
                            } else if (menudata.id === 'del') {
                                layer.alert(`你确定要删除 [id:${data.id}] 吗?`, {
                                    title: '警告',
                                    icon: 0,
                                }
                                    , function (index) {
                                        var loadIndex = layer.load(2);

                                        $.ajax({
                                            url: '/api/Delete',
                                            type: 'POST',
                                            data: JSON.stringify({ id: data.id }),
                                            contentType: 'application/json',
                                            success: function (response) {
                                                if (response.code != 0) {
                                                    layer.msg(`删除失败: {response.msg}`)
                                                    return;
                                                }
                                                refresh();
                                                layer.msg('删除成功');
                                            },
                                            error: function () {
                                                layer.msg(`删除失败! 服务器无响应!`);
                                            },
                                            complete: function () {
                                                layer.close(loadIndex);
                                                layer.close(index);
                                            }
                                        });

                                    });
                            }
                        },
                        align: 'right', // 右对齐弹出
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                    })
                }
            });


        });
    </script>
</body>

</html>